<template>
  <div class="order">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="pay_time"
        label="下单时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="subject"
        label="菜品"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="手机号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="total_amount"
        label="支付金额">
      </el-table-column>
      <el-table-column
        prop="order_type"
        label="状态">
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="danger" round @click="showName(scope.row.order_type,scope.row.pk)">接单</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "order",
    data() {
      return {
        tableData: [],
        orderList: '',
        username:this.$cookies.get('username')
      }
    },
    methods: {
      get_list() {
        this.$axios({
          url: 'http://127.0.0.1:8000/orderlist/',
          method: 'get',
        }).then(response => {
          this.tableData = response.data;
          // console.log(response.data)
        })
      },
      showName(type, pk) {
        console.log(type, pk);
        if (type === '已接单') {
          if (!this.username){
            this.$message({
            message: '请先登录',
            type: 'warning',
            duration: 1000,
          });
            return
          }
          this.$message({
            message: '此单已被别人接走',
            type: 'warning',
            duration: 1000,
          });
        }
        else {
          if (!this.username){
            this.$message({
            message: '请先登录',
            type: 'warning',
            duration: 1000,
          });
            return
          }

          this.$axios({
            url: 'http://127.0.0.1:8000/modify/',
            method: 'post',
            data:{
              pk : pk
            }
          });
           this.$message({
            message: '接单成功',
            type: 'success',
            duration: 1000,
          });
           setTimeout(() =>{
                            window.location.reload()
                        },1000);
        }
      }
    },
    created() {
      this.get_list()
    }
  }
</script>

<style scoped>

</style>
